<template>
	<view class="search">
		<uni-search-bar :placeholder="placeholder" @confirm="search"></uni-search-bar>
		<text class="text">{{text}}</text>
		<view class="class-list">
			<view v-for="(c,index) in classList" :key="index" @click="goToBlank(c.name)" class="class-item">
				<image :src="c.imgUrl" class="img"></image>
				<view>
					{{c.name}}
				</view>
			</view>
		</view>
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view v-for="(i,index) in scrollList" :key="index" @click="goToBlank(i.title)" class="scroll-view-item_H">
					<view class="title">
						{{i.title}}
					</view>
					<view class="sub-title">
						{{i.subTitle}}
					</view>
					<view class="describ">
						{{i.describ}}
					</view>
					<image :src="i.imgUrl" class="img" />
				</view>
			</scroll-view>
			<v-tabs v-model="current" @change="changeTab" :scroll="true" :tabs="tabs"></v-tabs>
			<view v-show="current === 0" class="tab-list">
				<view v-for="(i,index) in tabList[0]" :key="index" @click="goToBlank(i.title)" class="list-card flex-row">
					<image :src="i.imgUrl" class="card-img" />
					<view class="card-text">
						<view class="title">{{i.title}}</view>
						<uni-rate :readonly="true" active-color="#ff7f50" :size="18" :value="i.rate" />
						<view class="addr-dist flex-row" style="justify-content: space-between;">
							<view>
								{{i.attr}}
							</view>
							<view class="dist">
								距离{{i.dist}}
							</view>
						</view>
						<view class="visitors">最近{{i.visitors}}人去过</view>
					</view>
				</view>
			</view>
			<view v-show="current === 1" class="tab-list">
				<view v-for="(i,index) in tabList[1]" :key="index" @click="goToBlank(i.title)" class="list-card flex-row">
					<image :src="i.imgUrl" class="card-img" />
					<view class="card-text">
						<view class="title">{{i.title}}</view>
						<uni-rate :readonly="true" active-color="#ff7f50" :size="18" :value="i.rate" />
						<view class="addr-dist flex-row" style="justify-content: space-between;">
							<view>
								{{i.attr}}
							</view>
							<view class="dist">
								距离{{i.dist}}
							</view>
						</view>
						<view class="visitors">最近{{i.visitors}}人去过</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vTabs from '@/components/v-tabs/v-tabs'
	//import hmSearch from '@/components/HM-search/HM-search.vue';
	//import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	export default {
		components: {
			vTabs
		},
		data() {
			return {
				placeholder: '请输入内容',
				text: '',
				classList: [{
						name: "美食",
						imgUrl: "../../static/icon/gaode/gaode2_03.png"
					}, {
						name: "酒店",
						imgUrl: "../../static/icon/gaode/gaode2_05.png"
					}, {
						name: "景点",
						imgUrl: "../../static/icon/gaode/gaode2_07.png"
					}, {
						name: "休闲玩乐",
						imgUrl: "../../static/icon/gaode/gaode2_09.png"
					}, {
						name: "美食",
						imgUrl: "../../static/icon/gaode/gaode2_03.png"
					}, {
						name: "酒店",
						imgUrl: "../../static/icon/gaode/gaode2_05.png"
					}, {
						name: "景点",
						imgUrl: "../../static/icon/gaode/gaode2_07.png"
					}, {
						name: "休闲玩乐",
						imgUrl: "../../static/icon/gaode/gaode2_09.png"
					}, {
						name: "美食",
						imgUrl: "../../static/icon/gaode/gaode2_03.png"
					},{
						name: "酒店",
						imgUrl: "../../static/icon/gaode/gaode2_05.png"
					},
				],
				current: 0,
				tabs: ['为你推荐', '美食', '休闲玩乐', '酒店', '景点', '景点', '景点'],
				scrollList: [{
					title: "附近人气景点",
					subTitle: "月出游榜",
					describ: "真实用户评价",
					imgUrl: "../../static/icon/gaode/gaode2_16.png"
				}, {
					title: "附近人气餐厅",
					subTitle: "2.2万人打卡",
					describ: "人均70元起",
					imgUrl: "../../static/icon/gaode/gaode2_19.png"
				}, {
					title: "附近热门酒店",
					subTitle: "10万人打卡",
					describ: "人均129元起",
					imgUrl: "../../static/icon/gaode/gaode2_19.png"
				}],
				tabList: [
					[{
							title: "新世界城",
							attr: "南京西路2-68号",
							dist: "1km",
							visitors: 1974,
							rate: 4,
							imgUrl: "../../static/icon/xinshijie.jpg"
						},
						{
							title: "新世界城",
							attr: "南京西路2-68号",
							dist: "1km",
							visitors: 1974,
							rate: 4,
							imgUrl: "../../static/icon/xinshijie.jpg"
						},
						{
							title: "新世界城",
							attr: "南京西路2-68号",
							dist: "1km",
							visitors: 1974,
							rate: 4,
							imgUrl: "../../static/icon/xinshijie.jpg"
						}, {
							title: "新世界城",
							attr: "南京西路2-68号",
							dist: "1km",
							visitors: 1974,
							rate: 4,
							imgUrl: "../../static/icon/xinshijie.jpg"
						},
						{
							title: "新世界城",
							attr: "南京西路2-68号",
							dist: "1km",
							visitors: 1974,
							rate: 4,
							imgUrl: "../../static/icon/xinshijie.jpg"
						}
					],
					[{
							title: "耶里夏丽",
							attr: "南京西路2-68号",
							dist: "1km",
							visitors: 12123,
							rate: 5,
							imgUrl: "../../static/icon/ylxl.jpg"
						},
						{
							title: "耶里夏丽",
							attr: "南京西路2-68号",
							dist: "1km",
							visitors: 12123,
							rate: 5,
							imgUrl: "../../static/icon/ylxl.jpg"
						}
					]
				]
			}
		},
		methods: {
			search(e, val) {
				this.text = e.value
			},
			changeTab(e) {
				console.log(e)
			},
			goToBlank(content){
				uni.navigateTo({
					url: "/pages/blank/Blank?data=" + encodeURIComponent(content?content:'空白页')
				})
			}
		}

	}
</script>

<style lang="scss" scoped>

</style>
